<script>
/**
 * @desc 路线列表的搜索框
 */

import { mapState, mapMutations, mapActions } from 'vuex'
import searchIco from '@/assets/icons/search.svg'

export default {
  name: 'search-bar',
  data: () => ({ searchIco, text: '' }),
  computed: { ...mapState('TravelList', ['keyword']) },
  methods: {
    ...mapMutations('TravelList', { setTravel: 'setState' }),
    ...mapActions('TravelList', ['getList']),
    handleUpdateKeyword(e) {
      if (e.mp && e.mp.detail && e.mp.detail.value !== this.text) {
        this.text = e.mp.detail.value
        this.setTravel({ keyword: this.text })
        wx.showLoading({ title: '加载中...', mask: true })
        this.getList().finally(() => wx.hideLoading())
      }
    }
  }
}
</script>

<template>
  <div class="search-bar">
    <div class="content-box">
      <img :src="searchIco" class="icon">
      <input
        type="text"
        name="texts"
        class="input-ele"
        placeholder="搜索目的地/旅游路线"
        maxlength="20"
        confirm-type="search"
        @confirm="handleUpdateKeyword"
        @blur="handleUpdateKeyword"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
$icon-size: 20px;

.search-bar {
  padding: 10px;
  background-color: #fff;

  .content-box {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 5px;
    background-color: $main-background-color;
  }

  .icon {
    width: $icon-size;
    height: $icon-size;
    margin-right: 10px;
  }

  .input-ele {
    flex: 1;
    font-size: 16px;
    line-height: 2;
  }
}
</style>
